<template>
  <view class="log" :style="'background-color: #f7f7f7;color:#333333;'+'min-height:'+$xyfun.xysys().windowHeight+'px'">
    <block v-if="!isLoading">
      <view class="log-list" v-if="!isEmpty">
        <view class="item m-b-20 flex p-30" :style="'background-color: #ffffff;'" v-for="item in logList" :key="item.id">
          <view class="l">
            <view class="ts-32 tb">{{item.type_text}}-{{item.coupons.name}}x{{item.nums}}</view>
            <view class="ts-24 m-t-15 tc-333">{{$xyfun.timeFormat(item.createtime)}}</view>

          </view>
          <view class="m-l-auto">
            <view class="tb p-t-25 ts-34 tb" :style="'color:#ff5335;'">{{item.price}}</view>
          </view>
        </view>
      </view>
      <view v-else>
        <xy-empty text="暂无数据" />
      </view>
    </block>
  </view>
</template>

<script>
import { mapState } from 'vuex';
import xyEmpty from '@/components/xy-empty';
export default {
  components: {
    xyEmpty,
  },
  data() {
    return {
      type : '',
      isLoading:true,
      isEmpty: true,
      logList: [],
      currentPage: 1,
      lastPage: 1,
      loadStatus: 'loadmore',
    }
  },
  computed: {
    ...mapState(['common'])
  },
  async onLoad(options) {
    if(options?.type){
      this.type = options.type;
    }
    this.loadData();
  },
  onPullDownRefresh() {
    this.currentPage = 1;
    this.logList = [];
    this.loadData();
  },
  onReachBottom() {
    if(this.currentPage < this.lastPage) {
      this.currentPage += 1;
      this.loadData();
    }
  },
  methods: {
    async loadData(){

      this.$api.postBase({
        url: '/user_coupons/lists',
        loadingTip:'加载中...',
        data: {
          type : this.type,
          page: this.currentPage,
        },
        success: res => {
          uni.stopPullDownRefresh();
          this.isLoading = false;
          this.logList = [...this.logList, ...res.data];
          this.isEmpty = !this.logList.length;
          this.currentPage = res.current_page;
          this.lastPage = res.last_page;
          this.loadStatus = this.currentPage < res.last_page ? 'loadmore' : 'nomore';
        }
      });
    },

  }
}
</script>

<style scoped lang="scss">
.log-list{
  .item .l{
    image{width: 96rpx;height: 96rpx;border-radius: 48rpx;}
  }
}
</style>